<template>
  <div class="fire-control-wrap container-height bg-ff">
    <el-form
      :model="formModel"
      :rules="formRule"
      ref="refForm"
      label-width="120px"
      label-position="right"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="发布类型" prop="publishTypeName">
            <el-input
              v-model="formModel.publishTypeName"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属表单定义" prop="busId">
            <el-input v-model="formModel.busId" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源编码" prop="resCode">
            <el-input v-model="formModel.resCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源名称" prop="resName">
            <el-input v-model="formModel.resName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源排序" prop="sortNo">
            <el-input v-model="formModel.sortNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源图标" prop="resIcon">
            <el-input v-model="formModel.resIcon"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布资源目录" prop="parentResName" class="buju">
            <el-input v-model="formModel.parentResName"></el-input>
            <el-button @click="selectParentRes">选择</el-button>
          </el-form-item>
        </el-col>
        <!--                <el-col :span="12">-->
        <!--                    <el-form-item  label="应用hostId" prop="hostId">-->
        <!--                        <el-input v-model="formModel.hostId"></el-input>-->
        <!--                    </el-form-item>-->
        <!--                </el-col>-->
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="formModel.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-center">
      <el-button type="primary" @click="saveForm">保存</el-button>
      <el-button @click="handleClose">返回</el-button>
    </div>
    <ResSelect ref="resSelect" :callback="callbackRes"></ResSelect>
  </div>
</template>
<script>
import devResourcePublishService from "@/service/dev/publish/DevResourcePublishService";
import ucHostService from "@/service/publics/UcHostService";
import ResSelect from "./prop/res-select";

export default {
  props: {},
  components: { ResSelect },
  data() {
    return {
      showDialog: false,
      addOrEdit: "",
      formModel: {
        publishType: "2",
        publishTypeName: "表单发布",
        busId: "",
        status: "1",
        resUrl: "",
        parentResName: "",
        parentResId: "",
        hostId: "",
      },
      url: "designPreview/preview",
      // 表单校验
      formRule: {
        resCode: [
          { required: true, message: "资源编码不能为空", trigger: "blur" },
        ],
        resName: [
          { required: true, message: "资源名称不能为空", trigger: "blur" },
        ],
        parentResId: [
          { required: true, message: "发布资源目录不能为空", trigger: "blur" },
        ],
        hostId: [
          { required: true, message: "应用hostId不能为空", trigger: "blur" },
        ],
        parentResName: [
          { required: true, message: "发布资源目录不能为空", trigger: "blur" },
        ],
      },
    };
  },
  async created() {
    if (this.$route.params.id) {
      this.formModel.busId = this.$route.params.id;
      this.formModel.resUrl = this.url + "?id=" + this.$route.params.id;
      this.init();
    }
  },

  methods: {
    /**
     * 初始化状态
     */
    init() {
      //获取hostId
      let params = {
          code: "formLowCode",
      };
      ucHostService.queryPage(params).then((resp) => {
        if (resp.status === 200) {
          this.hostList = resp.data.data;
          if (this.hostList[0].id) {
            this.formModel.hostId = this.hostList[0].id;
          } else {
            this.$message({ message: "获取hostId失败", type: "success" });
          }
        } else {
          throw new Error("接口请求失败, status: " + resp.status);
        }
      });
    },

    selectParentRes() {
      this.$refs.resSelect.init();
    },

    //用户信息回调
    callbackRes(result) {
      console.log(result);
      this.formModel.parentResName = result.showName;
      this.formModel.parentResId = result.id;
    },

    /**
     * 提交
     */
    saveForm() {
      // 表单校验
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          // 保存访问地址配置
          devResourcePublishService.save(this.formModel).then(() => {
            this.$message({ message: "保存成功", type: "success" });
            this.handleClose();
          });
        }
      });
    },

    handleClose() {
      history.back();
    },
  },
};
</script>
<style>
.buju > .el-form-item__content {
  display: flex;
}
.buju .el-button {
  margin-left: 3px;
}
.bg-ff{
  padding:20px;
  padding-top:40px;
}
</style>
